<template>
    <div class="bgf">
        <!-- <el-tabs v-model="reviewStatus" >
            <el-tab-pane label="开屏页设置" name="1"></el-tab-pane>
            <el-tab-pane label="线上Banner" name="4"></el-tab-pane>
            <el-tab-pane label="线下Banner" name="5"></el-tab-pane>
            <el-tab-pane label="线上广告位" name="2"></el-tab-pane>
            <el-tab-pane label="线下广告位" name="3"></el-tab-pane>
        </el-tabs> -->

        <div v-show="reviewStatus=='4'||reviewStatus=='5'" class="manage1">
            <div class="from">
                <el-form  :inline="true" class="demo-form-inline">
                    <el-form-item v-show="reviewStatus=='4'" label="创建时间：">
                        <el-date-picker v-model="param2.startTime" type="date" class="w206" placeholder="开始时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/> &nbsp; 至 &nbsp;
                        <el-date-picker v-model="param2.endTime" type="date" class="w206" placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </el-form-item>

                    <!-- <el-form-item v-show="reviewStatus=='5'" label="创建时间：">
                        <el-date-picker v-model="param3.startTime" type="date" class="w206" placeholder="开始时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/> &nbsp; 至 &nbsp;
                        <el-date-picker v-model="param3.endTime" type="date" class="w206" placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </el-form-item> -->
                    <br/>

                    <el-form-item>
                        <el-button type="primary" class="w115 " @click="getList()">搜索</el-button>
                        &emsp;
                        <el-button @click="rewrite" text type="primary" >
                            <el-icon :size="16"><refresh /></el-icon> &nbsp;重置筛选条件
                        </el-button>
                    </el-form-item>
                </el-form>
                
            </div>
            &emsp; <el-button type="primary" class="w115 " @click="openAdd" >添加banner</el-button>

        </div>
    </div>

    <div class="bgf padd20 reviewStatus1">
        <el-form :model="form1" label-width="auto"  >
            <el-form-item label="开屏页设置：" >
                <div class="col9e lh32  font12">
                    点击可添加开屏页，开屏页尺寸比例9:16
                </div>
                <el-upload
                    :headers="{ token: $store.state.token }"
                    :action = globalUrl 
                    :before-upload="beforeAvatarUpload"
                    :on-success="(val)=>uploadSuccess(val,'img')"
                    class="avatar-uploader"
                    :show-file-list="false"
                    name="file"
                >
                    <img v-if="form1.img" :src="form1.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>

            <el-form-item label="链接类型：" v-if="isvisiter==true">
                <el-select v-model="form1.linkType" placeholder="请选择" class="w145">
                    <el-option label="不跳转" :value="1" />
                    <el-option label="外链" :value="2" />
                </el-select>
            </el-form-item>

            <el-form-item v-show="form1.linkType!=1 " label="跳转链接：" prop="goodsName" v-if="isvisiter==true">
                <el-input v-model="form1.linkUrl" placeholder="请输入商品ID或者链接地址" class="w336" />
            </el-form-item>
            <el-form-item label=" " >
                <el-button @click="submit(form1)" type="primary" class="w115">保存</el-button>
            </el-form-item>
        </el-form>
    </div>

    

    <p></p>
</template>
<script>
import  areadata from '@/js/city.js'
export default {
    data(){
        return{
            // 1电商首页banner 2秒杀3拼团4积分商城'
            type: { 1: '首页banner', 2: '秒杀banner', 3: '拼团banner', 4: '积分商城' },
            reviewStatus:'1',
            onlineShow: false,
            underlineShow: false,
            isvisiter:false,
            adShow: false, 
            globalUrl: '/api/system/upload/uploadList',
            param2:{
                pageNumber:1,
                pageSize: 10,
            },
            loading: false,
            form:{},
            form1:{},
            total4:0,

            param3:{
                pageNumber:1,
                pageSize: 10,
            },
            list5:[],
            total5:0,
            cascader:[],
            cityName: '请选择',
            options:areadata,
            props:{
                value: 'id',
                children: 'cities',
                label: 'name',
            }
        }
    },
    mounted(){
        this.getList();
    },
    methods:{

        submit(val){
            console.log(val,'val');
            let that = this;
            that.$api.advertiseUpdate(val).then(res=>{
                console.log(res);
                if(res){
                    that.$message.success(res.message)
                }
            })
        },


        async adEditSub(){
            let that = this;
            console.log(that.form,'this.form=====');
            // return;
            let res = await that.$api.advertiseUpdate(this.form);
             
            console.log(res);
            if(res){
                that.adShow = false;
                if(that.reviewStatus!='1'){
                    that.getAd(that.reviewStatus)
                }
            }
        },

        editAd(val){
            let that = this;

            that.form = JSON.parse( JSON.stringify(val) );
            // delete that.form.createTime;
            that.adShow = true;
        },

        delBanner(id){
            this.$msgbox.confirm(
                "banner图删除请谨慎操作，删除后将无法恢复，确定删除？",
                "删除banner图",
                {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                }
            ).then(async() => {
                let that = this;
                // return;
                let res;

                if(that.reviewStatus=='4'){
                    res = await that.$api.bannerDelete({bannerId:id});
                }else if(that.reviewStatus=='5'){
                    res = await that.$api.deleteLocalLifeBanner({bannerId:id});
                }
                console.log(res);
                if(res){
                    that.getList(that.reviewStatus);
                    that.$message.success('删除成功');
                }
                
            }).catch(() => {});
        },

        handleChange(val){
            console.log(val)
            if(val){
                this.form.cityId = val[1];
            }
        },

        editBanner(val){
            let that = this;
            console.log(val)

            if(that.reviewStatus=='4'){
                that.form = JSON.parse( JSON.stringify(val) );
                delete that.form.createTime;
                that.onlineShow = true;
            }else if(that.reviewStatus=='5'){
                // that.form = JSON.parse( JSON.stringify(val) );
                this.cascader = [];
                that.form = {
                    cityId : val.cityId,
                    linkPath : val.linkUrl,
                    linkType : val.linkType,
                    photo : val.img,
                    sort : val.sort,
                    bannerId : val.bannerId,
                },
                that.cityName = val.cityName;
                that.underlineShow = true;
            }
        },

        // 提交--添加/编辑线上banner
        async onlineEditSub(){
            let that = this;
            console.log(that.form,'this.form=====');

            // return;
            let res;
            if(this.form.bannerId){
                res = await that.$api.bannerUpdate(this.form);
            }else{
                res = await that.$api.bannerUpdate(this.form);
            }
            console.log(res);
            if(res){
                that.onlineShow = false;
                that.getList('4')
            }
        },

        // 提交--添加/编辑线下banner
        async underlineEditSub(){
            let that = this;
            console.log(that.form,'this.form=====');

            // return;
            let res;
            if(this.form.bannerId){
                res = await that.$api.updateLocalLifeBanner(this.form);
                that.cityName = '请选择';
            }else{
                res = await that.$api.addLocalLifeBanner(this.form);
            }
            console.log(res);
            if(res){
                that.underlineShow = false;
                that.getList('3')
            }
        },

        openAdd(){
            this.form = {};
            this.fileList = [];
            if(this.reviewStatus=='4'){
                this.onlineShow = true;
            }else if(this.reviewStatus=='5'){
                this.underlineShow = true;
                this.cascader = [];
            }
        },

        async getList(reviewStatus){
            // console.log('00000000')
            let that = this;
            
            let res = await that.$api.bannerList(that.param2);
            console.log('res',res)
            that.form1 = res
        },

        // 重置
        rewrite(){
            let that = this;
            let obj = {
                pageNumber: that.param.pageNumber,
                pageSize: that.param.pageSize,
            }
            that.param = obj;
        },

         //图片上传成功
        uploadSuccess(val,key){
            // console.log(val,key)
            this.loading = false;
            if(val.status==200){
                let img = this.utils.Decrypt(val.data);
                console.log(img);
                if(this.reviewStatus=='1'){
                    this.form1[key] = img.path
                }else{
                    this.form[key] = img.path
                }
            }
        },
       
        beforeAvatarUpload(file){
            console.log('000000')
            const isLt = file.size / 1024 / 1024 < 3

            if (!isLt) {
                this.$message.warning('选择图片过大，请重新上传！');
            }
            return isLt 
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            if(this.reviewStatus=='4'){
                this.param2.pageSize = val;
            }else if(this.reviewStatus=='5'){
                this.param3.pageSize = val;
            }
            this.getList(this.reviewStatus);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            // this.param.pageNumber = val;
            if(this.reviewStatus=='4'){
                this.param2.pageNumber = val;
            }else if(this.reviewStatus=='5'){
                this.param3.pageNumber = val;
            }
            this.getList(this.reviewStatus);
        },
      
    }
}
</script>
<style lang="scss" scoped>
.manage1{
    padding: 25px 20px;
    .from{
        background: #F2F3F5;
        padding: 24px 16px 4px;
        margin-bottom: 20px;
    }
}
.reviewStatus1{
    .avatar {
        width: 90px;
        height: 160px;
        object-fit: cover;
    }
    .el-icon.avatar-uploader-icon {
        width: 90px;
        height: 160px;
    }
}
.avatar {
    width: 120px;
    height: 80px;
    object-fit: cover;
}
.el-icon.avatar-uploader-icon {
    width: 120px;
    height: 80px;
}
// :deep .el-upload-list--picture-card .el-upload-list__item {
//     width: 80px;
//     height: 80px;
// }
// :deep .el-upload--picture-card{
//     width: 80px;
//     height: 80px;
// }
:deep .place input::placeholder{
    color: #606266;
}
</style>